<template>
  <div style="width: 100%; height: 100%">
    <Header title="检测计划概况" />
    <div id="mycharts" class="content" />
  </div>
</template>
<script>
import Header from './header.vue'
import echarts from 'echarts'
import { getYearCheckedSituation } from '@/api/cms/Inspection-management/Inspection-plan-management/InspectionPlanManagementIndex'
export default {
  components: {
    Header
  },
  props: {
    conditionFind: {
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => {
        return {}
      },
      type: Object
    }
  },
  data() {
    return {}
  },
  watch: {
    conditionFind: {
      handler: function(newQuestion, oldQuestion) {
        this.init()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    init() {
      getYearCheckedSituation(this.conditionFind).then((res) => {
        const myChart = echarts.init(document.getElementById(`mycharts`))
        console.log(myChart)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          grid: {
            top: '20%',
            left: '5%',
            right: '5%',
            bottom: '20%'
          },
          color: [
            '#00CE83',
            '#4493FB',
            '#3646FA',
            '#57E5FD',
            '#74EABF',
            'rgba(244, 216, 115, 1)'
          ],
          legend: [
            {
              data: ['完成率'],
              right: '280',
              orient: 'vertical',
              itemWidth: 10, // 设置宽度

              itemHeight: 10 // 设置高度
            },
            {
              data: ['1c', '2c', '4c', '完成数', '超期数'],
              right: '40',
              icon: 'circle', //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none

              itemWidth: 10, // 设置宽度

              itemHeight: 10 // 设置高度
            }
          ],
          xAxis: [
            {
              type: 'category',
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#606266',
                  fontSize: 14
                }
              },
              data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月'
              ],
              axisPointer: {
                type: 'shadow'
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(192, 209, 225, 1)',
                  width: 1 // 这里是为了突出显示加上的
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#606266',
                  fontSize: 14
                }
              },
              splitLine: {
                show: false
              },

              axisLine: {
                lineStyle: {
                  color: 'rgba(192, 209, 225, 1)',
                  width: 1 // 这里是为了突出显示加上的
                }
              }
            },
            {
              type: 'value',
              name: '',
              position: 'right',
              splitNumber: 5,
              axisLabel: {
                formatter: '{value}%',
                textStyle: {
                  color: '#606266',
                  fontSize: 14
                }
              },
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(192, 209, 225, 1)',
                  width: 1 // 这里是为了突出显示加上的
                }
              }
            }
          ],
          series: [
            {
              name: '完成率',
              type: 'line',
              yAxisIndex: 1,
              emphasis: {
                focus: 'series'
              },
              data: res.data.data_CompleteRate
            },
            {
              name: '1c',
              type: 'bar',
              stack: 'C类型',
              emphasis: {
                focus: 'series'
              },
              data: res.data.data_1C
            },
            {
              name: '2c',
              type: 'bar',
              stack: 'C类型',
              emphasis: {
                focus: 'series'
              },
              data: res.data.data_2C
            },
            {
              name: '4c',
              type: 'bar',
              stack: 'C类型',
              emphasis: {
                focus: 'series'
              },
              data: res.data.data_4C
            },
            {
              name: '完成数',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: res.data.data_Complete
            },
            {
              name: '超期数',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: res.data.data_OverTime
            }
          ]
        }
        myChart.setOption(option)
      })
    }
  }
}
</script>
<style lang="sass" scoped>
.content
    width: 100%
    height: calc(100% - 50px)
</style>
